{include file="public/header,public/nav,public/fixbar" title="我的订单-<?php echo request()->pc_info['seo_title']?>"/}
<div class="layui-body">
    <div class="layui-container">
        <div class="layui-col-space15">
            <!-- 菜单栏 -->
            <div class="layui-col-xs12 layui-col-sm4 layui-col-md4 layui-col-lg3">
                <div class="layui-main user-main min-height-90vh">
                    {include file="user/menu"/}
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-sm8 layui-col-md8 layui-col-lg9">
                <div class="layui-main user-main min-height-90vh">
                    <h2>我的订单</h2>
                    <div class="layui-tab layui-tab-brief padding-bottom-10">
                        <ul class="layui-tab-title">
                            <li class="layui-this select-status" data-status="">全部</li>
                            <li class="select-status" data-status="0">待付款</li>
                            <li class="select-status" data-status="1">待发货</li>
                            <li class="select-status" data-status="3">待收货/使用</li>
                            <li class="select-status" data-status="4">待评价</li>
                            <li class="select-status" data-status="6">退款/售后</li>
                        </ul>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-space15 scrollbar height-700" id="order-list">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/footer"/}
<script type="text/javascript">
    layui.use(['flow','layer'], function(){
        var layer = layui.layer, flow = layui.flow, $=layui.jquery;
        
        var status = '';
        $(function(){
            loadList(status);  // 加载列表
        })

        // 根据类型读取
        $(".select-status").on('click', function(){
            status = $(this).data('status');
            $('#order-list').html('');
            loadList(status);
        });

        // 分页加载列表
        function loadList(status){
            var limit = 10;//每次请求的条数
            flow.load({
                elem: '#order-list' //指定列表容器
                ,scrollElem: '#order-list'//滚动条所在元素
                ,end: '—— 已经到底了~ ——'
                ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页的回调
                    $.ajax({
                        type: "post",
                        dataType: "json",
                        data: {'page': page, 'limit':limit, 'status':status},//请求的页码和每页显示条数
                        url: '/user/order',
                        success: function (res) {
                            var lis = [];
                            if(res.code == 0){
                                if (res.data.length > 0) {
                                    
                                    var newsHtml = '';
                                    layui.each(res.data, function(index, item){
                                        
                                        var goods_list = '';
                                        if (item.orderGoods) {
                                            layui.each(item.orderGoods, function(key, goods){
                                                goods_list += 
                                                ` <a href="${goods.href}">
                                                    <div class="item">
                                                        <img class="order-goods-img" src="${goods.img}">
                                                        <div class="detail layui-ellip" style="width: 100%;">
                                                            <div class="product-title space-between">
                                                                <p class="layui-ellip">${goods.product_name}</p>
                                                                <div>￥${goods.price}</div>
                                                            </div>
                                                            <div class="space-between" style="margin-top: 10px;color:#7a7a7a;">
                                                                <p>规格：${goods.attr_name}</p>
                                                                <p>x${goods.num}</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </a>
                                                <hr class="layui-order-gray">`;
                                            })
                                        }

                                        var status_list = '';
                                        if (item.status == 0) {
                                            status_list = `<a class="layui-btn layui-btn-primary layui-btn-sm cancel" data-id="${item.id}">取消订单</a><a class="layui-btn layui-bg-success layui-btn-sm continue-pay" data-id="${item.id}">继续支付</a>`;
                                        }
                                        newsHtml += `<div class="layui-col-xs12">
                                                        <div class="layui-card">
                                                            <div class="layui-card-header space-between">
                                                                <div>
                                                                    <span class="margin-right-10">${item.create_time}</span>
                                                                    订单号：${item.order_no}
                                                                    <a target="_blank" href="/user/order_detail?order_id=${item.id}">
                                                                        <span class="layui-font-success margin-left-15">订单详情 <i class="layui-icon layui-icon-right layui-font-14"></i>
                                                                        </span>
                                                                    </a>
                                                                </div>
                                                                <div class="layui-font-red">${item.status_text}</div>
                                                            </div>
                                                            <div class="layui-card-body goods-spec-item">
                                                                ${goods_list}
                                                            </div>
                                                            <div class="layui-card-footer">
                                                                <p>
                                                                    应付款：
                                                                    <span class="product-price">
                                                                        <span class="symbol">￥</span>${item.pay_price}
                                                                    </span>
                                                                </p>
                                                                <p>
                                                                    ${status_list}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>`;
                                    });
                                    
                                    lis.push(newsHtml);
                                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                                    //res.total为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                                    next(lis.join(''), page < Math.ceil(res.count/limit));
                                    
                                } else {
                                    $('#order-list').html('<div class="layui-empty"><img src="/static/images/nodata/no_order.png"><p>暂无订单数据~</p></div>');
                                }
                            } else {
                                layer.msg(res.msg, {icon:2, time: 1500});
                            }
                        }
                        ,error:function(e){
                            layer.closeAll();
                            layer.msg("请求失败："+e.msg, {icon:2, time: 1500});
                        },
                    });
                }
            });
        }

        // 取消订单
        $(document).on('click', '.cancel',function(){
            var id = $(this).data('id');
            var index = layer.open({
                skin: 'layui-layer-radius', // 弹窗主题样式
                offset: 'auto',
                title: '取消订单',
                type: 2,
                anim: 'slideUp',
                shade: 0.3,
                shadeClose: true,
                area: ['450px', '500px'],
                content: '/user/cancel_order?id='+id
            });
            var device = layui.device('mobile');
            if (device.mobile) {
                layer.full(index);
            }
        })

        // 继续支付
        $(document).on('click', '.continue-pay',function(){
            var id = $(this).data('id');
            var index = layer.open({
                skin: 'layui-layer-radius', // 弹窗主题样式
                offset: 'auto',
                title: '选择支付方式',
                type: 2,
                anim: 'slideUp',
                shade: 0.3,
                shadeClose: true,
                area: ['800px', '600px'],
                content: '/order/continue_pay?order_id='+id
            });
            var device = layui.device('mobile');
            if (device.mobile) {
                layer.full(index);
            }
        })
    });

</script>